<template>
  <div class="home" @scroll="changescroll">
    <Select></Select>
    <Lunbo :banner="banner"></Lunbo>
    <Fandong :roll="roll"></Fandong>
    <Menus :menus="menus"></Menus>
    <Coupon :coupons="coupons"></Coupon>
    <Scendkill v-if="Scendkills" :Scendkills="Scendkills"></Scendkill>
    <Group :groups="groups" v-if="groups"></Group>
 
        <Goods-list></Goods-list>
    <div class="Nav" :class="isFixed?'isFixed':''" >
      <router-link :to="{ name: 'FxhDemoRecommend', params:{id:1} }" @click.native="changeBar(1)">
        <div :class="{'text':true ,'Active':this.Activebar==1}">
          <span>精品推荐</span>
          <p>多买多省</p>
        </div>
      </router-link>
      <router-link :to="{ name: 'FxhDemoHot', params:{id:2}  }" @click.native="changeBar(2)">
        <div :class="{'text':true ,'Active':this.Activebar==2}">
          <span>热门榜单</span>
          <p>热门榜单</p>
        </div>
      </router-link>
      <router-link :to="{ name: 'FxhDemoNew', params:{id:3} }" @click.native="changeBar(3)">
        <div :class="{'text':true ,'Active':this.Activebar==3}">
          <span>首发新品</span>
          <p>CRMEB</p>
        </div>
      </router-link>
      <router-link :to="{ name: 'FxhDemoPromotion', params:{id:4} }" @click.native="changeBar(4)">
        <div :class="{'text':true ,'Active':this.Activebar==4}">
          <span>促销单品</span>
          <p>新品首发</p>
        </div>
      </router-link>
    </div>
    <keep-alive>
     <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
const Select = () =>
  import(
    /* webpackChunkName: "FxhDemoSelect" */ "../components/HomeComponents/Select.vue"
  );
const Lunbo = () =>
  import(
    /* webpackChunkName: "FxhDemoLunbo" */ "../components/HomeComponents/Lunbo.vue"
  );
const Fandong = () =>
  import(
    /* webpackChunkName: "FxhDemoFandong" */ "../components/HomeComponents/Fandong.vue"
  );
const Menus = () =>
  import(
    /* webpackChunkName: "FxhDemoMenus" */ "../components/HomeComponents/Menus.vue"
  );
const Coupon = () =>
  import(
    /* webpackChunkName: "FxhDemoCoupon" */ "../components/HomeComponents/Coupon.vue"
  );
const Scendkill = () =>
  import(
    /* webpackChunkName: "FxhDemoScendkill" */ "../components/HomeComponents/Scendkill.vue"
  );
const Group = () =>
  import(
    /* webpackChunkName: "FxhDemoGroup" */ "../components/HomeComponents/Group.vue"
  );
const GoodsList = () =>
  import(
    /* webpackChunkName: "FxhDemoGoodsList" */ "../components/HomeComponents/GoodsList.vue"
  );

export default {
  name: "FxhDemoHomeView",
  components: {
    Select,
    Lunbo,
    Fandong,
    Menus,
    Coupon,
    Scendkill,
    Group,
    GoodsList,
  },
  data() {
    return {
      banner: [], //轮播数据
      roll: [], //向上翻动数据
      menus: [], //宫格菜单数据
      coupons: [], //优惠劵数据
      Scendkills: null, //秒杀活动数据
      groups: null, //拼团数据
      Activebar:1, //是否是当前bar
      isFixed:false,//是否吸顶
      ScendSwap:undefined,//秒杀时间戳
    };
  },
  async created() {
    console.log(this.$route.meta);
    const {
      data: { data },
    } = await this.$request("get", "/fxh/index");
    // console.log(data);
    this.banner = data.banner;
    this.roll = data.roll;
    this.menus = data.menus;

    const coupons = await this.$request("get", "/fxh/coupons", {
      page: 1,
      limit: 20,
      type: 1,
    });
    this.coupons = coupons.data.data;
    const Scendkill = await this.$request("get", "/fxh/seckill/index");
    console.log(Scendkill.data.data);
    if (!Scendkill) {
       this.Scendkills = Scendkill.data.data;
    this.ScendSwap=Scendkill.data.data.secKillResponse.timeSwap;
    this.$store.commit("setScendSwap",this.ScendSwap);
    const group = await this.$request("get", "/fxh/combination/index");
    this.groups = group.data.data;
    console.log(group.data.data);
    }
  },

  mounted() {
   window.addEventListener('scroll', this.changeScroll);
  },

  methods: {
    changeBar(index){
      this.Activebar=index;
    },
    changescroll(e){
      // console.log(e.target.scrollTop);
      if(e.target.scrollTop>1408){
        this.isFixed=true;
      }
      else if(e.target.scrollTop<1408){
        this.isFixed=false;
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.home {
  position: relative;
  height: 92vh;
  overflow-y: scroll;
  .Nav {
    @include around;
    background: #f5f5f5;
    padding-top: 15px;
    width: 345px;
    margin-left: 15px;
    .text {
      @include cloumn-center;
      span {
        color: #333;
      }
      p {
        font-size: 12px;
      }
    }
  }
}
.Active{
  span{
    color:#ff448f !important;
  }
  p{
    border-radius: 25px;
    color: #fff;
    background: linear-gradient(90deg,#ff448f,#ff67ad);
    padding:2px 5px;
  }
}
.isFixed{
  position: fixed;
  top: 0;
}
</style>
